/**
 * Created by tanbingqin on 2020/5/15.
 */
import React  from 'react'
import { messages } from 'share/common'
import { Popover, Badge, Button } from 'antd'
import ResizeTable from 'components/resize-table'
import consumerService from '../consumer.service'
import errorMessage from 'share/errorMessage'
import SlideFrame from 'components/slide-frame'
import AlipayDetail from '../edit-frames/alipay-edit-frame'

class AlipayOpenDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: messages('supplier-1.key36')/*层级*/,
          dataIndex: 'levelCode',
          render: value => <Popover placement="topLeft" content={messages('supplier-1.key38')/*租户*/}>{messages('supplier-1.key38')/*租户*/}</Popover>
        },
        {
          title: messages('supplier-1.key39')/*所属组织*/,
          dataIndex: 'levelOrgName',
          render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
        },
        {
          title: messages('supplier-1.key99')/*启用公司*/,
          dataIndex: 'companyCardConfigDistDTOList',
          render: (value,record) => (
            this.renderCompany(value, record)
          )
        },
        {
          title: messages('supplier-1.key123')/*支付宝企业PID*/,
          dataIndex: 'mappingId',
          render: value => value ? <Popover placement="topLeft" content={value}>{value}</Popover> : '-'
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: 'status',
          width: 120,
          render: value =>
            <Badge
              status={value === 1001 ? 'success' : 'error'}
              text={value === 1001 ? messages('supplier-1.key35')/*启用temp*/ : messages('supplier-1.key124')/*未启用*/}
            />
        },
        {
          title: messages('supplier-1.key125')/*授权状态*/,
          dataIndex: 'authStatus',
          width: 200,
          render: value =>
            <Badge
              status={value === 1002 ? 'success' : 'error'}
              text={value === 1002 ? messages('supplier-1.key126')/*已授权*/ : messages('supplier-1.key127')/*未授权*/}
            />
        }
      ],
      data: [],
      loading: false,
      page: 0,
      pageSize: 10,
      pagination: {
        total: 0,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10','20','50','100','200']
      }
    }
  }

  componentDidMount(){
    this.getList();
  }

  //表格渲染启用公司
  renderCompany = (value, record) => {
    if (value && value.length) {
      let relationNameList = [];
      if (value) {
        value.map((item, index) => {
          if (item.levelOrgId) {
            relationNameList.push(item.levelOrgName);
          }
        });
      }
      return <Popover placement="topLeft" content={relationNameList.join(',')}>{relationNameList.join(',')}</Popover>
    } else {
      return <span>{messages('supplier-1.key128')/*通用*/}</span>
    }
  };

  getList = () => {
    const { type } = this.props;
    const { page, pageSize, pagination } = this.state;
    let params = {
      supplierCode: '003',
      page,
      size: pageSize
    };
    this.setState({loading: true});
    consumerService.getCardConfigList(params).then(res => {
      pagination.total = Number(res.headers['x-total-count']) || 0;
      pagination.current = page + 1;
      this.setState({loading: false, data: res.data, pagination});
    }).catch(err => {
      this.setState({loading: false});
      errorMessage(err.response);
    });
  };

  handleTableChange = (pagination) => {
    let page = pagination.current;
    this.setState({
      page: page - 1,
      pageSize: pagination.pageSize,
      pagination
    }, this.getList);
  };

  //isSuccess是否是保存成功的关闭
  handleCloseSlide = (isSuccess) => {
    isSuccess && this.getList();
  };

  handleRowClick = (record) => {
    const { type } = this.props;
    SlideFrame.open({
      title: messages('common.edit')/*编辑*/,
      content: AlipayDetail,
      afterClose: this.handleCloseSlide,
      params: {
        type,
        record
      }
    }, this);
  };

  render() {
    const { columns, data, loading, pagination } = this.state;
    return (
      <div>
        <div style={{padding: '0 20px', marginBottom: '12px'}}>
          <div style={{marginTop: '12px'}}>
            {messages('common.total',{arg1: pagination.total||0})/*共搜索到 {arg1} 条数据*/}
          </div>
        </div>
        <ResizeTable
          rowKey="companyId"
          columns={columns}
          dataSource={data}
          pagination={pagination}
          onRow={record => ({onClick: () => this.handleRowClick(record)})}
          onChange={this.handleTableChange}
          loading={loading}
          bordered
          size="middle"
        />
      </div>
    )
  }
}

export default AlipayOpenDetail;
